<template>
    <div class="menu-manage-container">
        <div class="options-view">
            <el-button type="primary" size="small" @click="openAddDialog">新增</el-button>
        </div>
        <div class="table-view">
            <el-table :data="tableData" row-key="id" class="menus-table" border stripe>
                <el-table-column prop="id" label="ID" width="80"> </el-table-column>
                <el-table-column prop="name" label="菜单名称"> </el-table-column>
                <el-table-column prop="path" label="路由路径" width="300"> </el-table-column>
                <el-table-column prop="icon" label="图标">
                    <template #default="{ row }">
                        <el-icon :size="20">
                            <component :is="row.icon" />
                        </el-icon>
                    </template>
                </el-table-column>
                <el-table-column prop="father" label="上级">
                    <template #default="{ row }">
                        {{ getFatherById(row.father) }}
                    </template>
                </el-table-column>
                <el-table-column prop="sort" label="排序"> </el-table-column>
                <el-table-column prop="status" label="状态"> </el-table-column>
                <el-table-column prop="options" label="操作" width="120">
                    <template #default="{ row }">
                        <el-button type="primary" link @click="openEditDialog(row)">编辑</el-button>
                        <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
    <AddDialogView ref="addRef" :menus="menus" @initMenus="initMenus" />
    <editDialogView ref="editRef" :menus="menus" :currentMenu="currentMenu" @initMenus="initMenus" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import AddDialogView from './components/add-dialog-view.vue'
import editDialogView from './components/edit-dialog-view.vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

import api from '@/apis'

const icons = ref([])
const menus = ref([])
const tableData = ref([])
const initMenus = () => {
    api.menus.getMenus().then(res => {
        menus.value = res.menus
        initTableData(res.menus)
    })
}

const addRef = ref(null)
const editRef = ref(null)
const currentMenu = ref({})

const openAddDialog = () => {
    addRef.value.handleOpen()
}

const openEditDialog = (row) => {
    currentMenu.value = row
    editRef.value.handleOpen()
}

const initTableData = (menus) => {
    menus = menus.sort((a, b) => a.sort - b.sort)
    let fathers = menus.filter(item => item.father == 0)
    const childs = menus.filter(item => item.father != 0)
    fathers.forEach(father => {
        father.children = childs.filter(child => child.father == father.id)
    })
    tableData.value = fathers
}
const getFatherById = (id) => {
    if (id == 0) { return '无' }
    const father = tableData.value.find(item => item.id == id)
    return father.name
}

const initIcons = () => {
    for (const [key] of Object.entries(ElementPlusIconsVue)) {
        icons.value.push(key)
    }
}

onMounted(() => {
    initMenus()
    initIcons()
})
</script>

<style scoped>
.menu-manage-container {
    width: 100%;
    height: 100%;
}

.options-view {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    box-shadow: 0 0 10px #00000024;
    padding: 8px 12px;
}

.table-view {
    width: 100%;
    height: calc(100% - 50px);
    margin-top: 10px;
}

.menus-table {
    width: 100%;
    height: 100%;
    box-shadow: 0 0 10px #00000024;
}
</style>